<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Locales Tool</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
    <style>
      .bg-primary-1 {
        color: #fff;
        background-color: #337ab7;
        border-color: #337ab7;
      }
    </style>
  </head>
  <body>
    <main class="container">
      <div class="card card-success">
        <h3 class="card-header bg-success text-light">locales tool</h3>
        <div class="card-body">
          <form id="actionForm" onsubmit="return false">
            <div class="form-group">
              <label for="exampleFormControlInput1">目录</label>
              <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="" />
            </div>
            <div class="form-group">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="sieve" value="all" />
                <label class="form-check-label" for="inlineRadio1">全部</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="sieve" value="empty" />
                <label class="form-check-label" for="inlineRadio2">空</label>
              </div>
            </div>

            <div class="form-group">
              <fieldset>
                <!-- <legend>Languages</legend> -->
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" name="lang" value="en" />
                  <label class="form-check-label" for="en">en</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" name="lang" value="zh_Hans" />
                  <label class="form-check-label" for="zh_Hans">zh_Hans</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" name="lang" value="zh_Hant" />
                  <label class="form-check-label" for="zh_Hant">zh_Hant</label>
                </div>
              </fieldset>
            </div>

            <div class="form-group">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="actType" value="export" />
                <label class="form-check-label" for="inlineRadio1">导出</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="actType" value="import" />
                <label class="form-check-label" for="actType">导入</label>
              </div>
            </div>
            <div class="form-group">
              <!--  <div class="custom-file">
                <input type="file" class="custom-file-input" id="customFile" />
                <label class="custom-file-label" for="customFile">Choose file</label>
              </div> -->

              <div class="custom-file mb-3">
                <input type="file" class="custom-file-input" name="file" id="file" />
                <label class="custom-file-label" for="file">Choose file...</label>
                <div class="invalid-feedback">Example invalid custom file feedback</div>
              </div>
            </div>
            <!-- <button type="submit" class="btn btn-primary mr-3" >导出</button> -->
            <button id="btnSubmit" class="btn btn-success">提交</button>
          </form>
        </div>
      </div>
    </main>
  </body>

  <script>
    document.querySelector('.custom-file-input').addEventListener('change', function (e) {
      var nextSibling = e.target.nextElementSibling;
      if (e.target.files[0]) {
        var name = e.target.files[0].name;
        nextSibling.innerText = name;
      } else {
        nextSibling.innerText = 'Choose file...';
      }
    });

    $('#btnSubmit').on('click', function (event) {
      event.preventDefault();
      submitForm();
      return false;
    });

    function submitForm() {
      var form = $('#actionForm')[0];

      var data = new FormData(form);
      // data.append('CustomField', 'This is some extra data, testing');
      $('#btnSubmit').prop('disabled', true);

      $.ajax({
        type: 'POST',
        enctype: 'multipart/form-data',
        url: '/api/action',
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        success: function (data) {
          console.log('SUCCESS : ', data);
          $('#btnSubmit').prop('disabled', false);
        },
        error: function (e) {
          console.log('ERROR : ', e);
          $('#btnSubmit').prop('disabled', false);
        },
      });
    }
  </script>
</html>
